<template>
    <div class="box">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-overlay">
            <div class="loading-spinner"></div>
        </div>
        
        <!-- 错误提示 -->
        <div v-if="error" class="error-message">
            {{ error }}
            <button @click="fetchBills" class="retry-btn">重试</button>
        </div>
        <div class="top_banner">
            <div class="top_one">
                <div>
                    <svgIcon iconName="icon-zhangdan" font-size="40px"></svgIcon>
                </div>
                <div class="filter" @click="openFilter">
                    {{ filterDisplayText }}
                    <svgIcon iconName="icon-xialacaidan" font-size="40px"></svgIcon>
                </div>
                <div class="search" @click="router.push('/search')">
                    <svgIcon iconName="icon-sousuo" font-size="40px"></svgIcon>
                </div>
            </div>
            <div class="zhichu" @click="toggleAmount">
                支出
                <svgIcon :iconName="showAmount ? 'icon-xianshi1' : 'icon-yincang'" font-size="40px"></svgIcon>
                <p class="zhichu_num">
                    {{ showAmount ? totalExpense.toFixed(2) : '***' }}
                </p>
            </div>
            <div class="shouru">
                <div class="shouru_num">
                    收入
                    <p>{{ showAmount ? totalIncome.toFixed(2) : '***' }}</p>
                </div>
                <div class="yusuan_num">
                    预算
                    <svgIcon iconName="icon-xialacaidan" font-size="30px"></svgIcon>
                    <p>{{ showAmount ? budgetBalance.toFixed(2) : '***' }}</p>
                </div>
            </div>
        </div>
        <div class="top_two">
            <div class="ys" @click="showBudgetInput">
                <svgIcon iconName="icon-a-yusuan5" font-size="40px"></svgIcon>
                <p>预算</p>
            </div>
            <div @click="router.push('/invoice')">
                <svgIcon iconName="icon-yusuanbaobiao" font-size="40px"></svgIcon>
                <p>账单</p>
            </div>
            <div>
                <svgIcon iconName="icon-assets" font-size="40px"></svgIcon>
                <p>资产</p>
            </div>
            <div @click="router.push('/today')">
                <svgIcon iconName="icon-tupian" font-size="40px"></svgIcon>
                <p>每日言</p>
            </div>
            <div>
                <svgIcon iconName="icon-huixuyuan" font-size="40px"></svgIcon>
                <p>许愿望</p>
            </div>
        </div>
        <div class="content">
            <!-- 无数据提示 -->
            <div v-if="showNoData" class="no-data">
                <img src="../assets/tb/zanwu.png" alt="暂无数据">
                <p>{{ error || '暂无账单记录' }}</p>
            </div>
            
            <!-- 账单列表 -->
            <div v-else v-for="(group, date) in groupedBills" :key="date" class="item">
                <div class="item_time">
                    <div>{{ formatDate(date) }}</div>
                    <div>
                        支出：{{ group.expense.toFixed(2) }}
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        收入：{{ group.income.toFixed(2) }}
                    </div>
                </div>
                <div v-for="bill in group.bills" :key="bill.id" class="item_cont" @click="goToContent(bill)">
                    <div>
                        <svgIcon :iconName="bill.icon" font-size="50px"></svgIcon>
                        <span>{{ bill.category }}</span>
                    </div>
                    <div class="cont_num" :class="{ 'expense': bill.type === 'expense', 'income': bill.type === 'income' }">
                        {{ bill.type === 'expense' ? '-' : '+' }}{{ bill.amount.toFixed(2) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <TabBar></TabBar>
    <MessageBox ref="messageBox" />

    <!-- 筛选弹窗 -->
    <van-popup v-model:show="showFilter" position="bottom" round :style="{ height: '40%' }">
        <div class="filter-popup">
            <!-- 顶部操作栏 -->
            <div class="filter-header">
                <div class="cancel" @click="cancelFilter">取消</div>
                <div class="filter-tabs">
                    <div 
                        v-for="tab in ['按年', '按月', '全部']" 
                        :key="tab"
                        :class="['tab-item', { active: tempCurrentTab === tab }]"
                        @click="switchTab(tab)"
                    >
                        {{tab}}
                    </div>
                </div>
                <div class="confirm" @click="confirmFilter">确定</div>
            </div>

            <!-- 按年选择内容 -->
            <div v-if="tempCurrentTab === '按年'" class="year-picker">
                <van-picker
                    :columns="yearColumns"
                    @change="onYearChange"
                    :default-index="yearDefaultIndex"
                    :show-toolbar="false"
                />
            </div>

            <!-- 按月选择内容 -->
            <div v-if="tempCurrentTab === '按月'" class="month-picker">
                <div class="picker-container">
                    <van-picker
                        :columns="yearColumns"
                        @change="onYearChange"
                        :default-index="yearDefaultIndex"
                        :show-toolbar="false"
                    />
                    <van-picker
                        :columns="monthColumns"
                        @change="onMonthChange"
                        :default-index="monthDefaultIndex"
                        :show-toolbar="false"
                    />
                </div>
            </div>
        </div>
    </van-popup>

    <!-- 预算输入弹窗 -->
    <div v-if="showBudgetDialog" class="budget-dialog">
        <div class="dialog-content">
            <div class="dialog-title">设置预算</div>
            <input 
                type="number" 
                v-model="budgetInput"
                class="budget-input" 
                placeholder="请输入预算值"
                ref="budgetInputRef"
            >
            <div class="dialog-buttons">
                <button class="cancel-btn" @click="showBudgetDialog = false">取消</button>
                <button class="confirm-btn" @click="confirmBudget">确定</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed, nextTick } from 'vue';
import TabBar from '@/components/TabBar.vue';
import MessageBox from '@/components/MessageBox.vue';
import request from '../utils/request';
import { useRouter } from 'vue-router';
import { Popup, Picker } from 'vant';

const router = useRouter();
const messageBox = ref(null);
const userInfo = ref(null);

// 账单数据
const bills = ref([]);
const loading = ref(false);
const error = ref('');
// 从本地存储读取预算值，如果没有则默认为0.00
const yusuan = ref(parseFloat(localStorage.getItem('yusuan')) || 0.00);

// 筛选相关状态
const showFilter = ref(false);
const currentTab = ref('全部');
const selectedYear = ref(null);
const selectedMonth = ref(null);
const yearDefaultIndex = ref(0);
const monthDefaultIndex = ref(0);

// 添加临时存储变量
const tempSelectedYear = ref(null);
const tempSelectedMonth = ref(null);
const tempCurrentTab = ref('全部');

// 预算输入相关
const showBudgetDialog = ref(false);
const budgetInput = ref('');
const budgetInputRef = ref(null);

// 添加显示/隐藏状态
const showAmount = ref(true);

// 获取当前月份
const currentMonth = computed(() => {
    const now = new Date();
    return now.getMonth() + 1;
});

// 年份列表
const yearColumns = computed(() => {
    const currentYear = new Date().getFullYear();
    return Array.from({length: currentYear - 2019 + 1}, (_, i) => ({
        text: `${2019 + i}年`,
        value: 2019 + i
    }));
});

// 月份列表
const monthColumns = computed(() => {
    const now = new Date();
    const currentYear = now.getFullYear();
    const currentMonth = now.getMonth() + 1;
    
    // 如果是2025年，只显示到当前月份
    if (selectedYear.value === currentYear) {
        return Array.from({length: currentMonth}, (_, i) => ({
            text: `${i + 1}月`,
            value: i + 1
        }));
    }
    
    // 其他年份显示所有月份
    return Array.from({length: 12}, (_, i) => ({
        text: `${i + 1}月`,
        value: i + 1
    }));
});

// 添加筛选显示文本的计算属性
const filterDisplayText = computed(() => {
    console.log('计算筛选显示文本:', {
        currentTab: currentTab.value,
        selectedYear: selectedYear.value,
        selectedMonth: selectedMonth.value
    });
    
    if (currentTab.value === '全部') {
        return '全部';
    }
    if (currentTab.value === '按年' && selectedYear.value) {
        return `${selectedYear.value}年`;
    }
    if (currentTab.value === '按月' && selectedYear.value && selectedMonth.value) {
        return `${selectedYear.value}年${selectedMonth.value}月`;
    }
    return '全部';
});

// 切换标签
const switchTab = (tab) => {
    console.log('切换标签:', tab);
    tempCurrentTab.value = tab;
    
    if (tab === '全部') {
        tempSelectedYear.value = null;
        tempSelectedMonth.value = null;
    } else if (tab === '按年') {
        // 如果切换到按年，设置默认年份为当前年份
        if (!tempSelectedYear.value) {
            tempSelectedYear.value = new Date().getFullYear();
            // 设置年份选择器的默认索引
            const yearIndex = yearColumns.value.findIndex(
                year => year.value === tempSelectedYear.value
            );
            yearDefaultIndex.value = yearIndex >= 0 ? yearIndex : 0;
        }
    } else if (tab === '按月') {
        // 如果切换到按月，确保年份已选择
        if (!tempSelectedYear.value) {
            tempSelectedYear.value = new Date().getFullYear();
            // 设置年份选择器的默认索引
            const yearIndex = yearColumns.value.findIndex(
                year => year.value === tempSelectedYear.value
            );
            yearDefaultIndex.value = yearIndex >= 0 ? yearIndex : 0;
        }
        // 设置默认月份为当前月份
        if (!tempSelectedMonth.value) {
            tempSelectedMonth.value = new Date().getMonth() + 1;
            // 设置月份选择器的默认索引
            const monthIndex = monthColumns.value.findIndex(
                month => month.value === tempSelectedMonth.value
            );
            monthDefaultIndex.value = monthIndex >= 0 ? monthIndex : 0;
        }
    }
};

// 年份选择变化
const onYearChange = (value) => {
    console.log('年份选择变化:', value);
    tempSelectedYear.value = value.selectedValues[0];
    yearDefaultIndex.value = value.selectedIndexes[0];
    
    // 如果当前是按月标签，重置月份选择为当前月份
    if (tempCurrentTab.value === '按月') {
        tempSelectedMonth.value = new Date().getMonth() + 1;
        const monthIndex = monthColumns.value.findIndex(
            month => month.value === tempSelectedMonth.value
        );
        monthDefaultIndex.value = monthIndex >= 0 ? monthIndex : 0;
    }
};

// 月份选择变化
const onMonthChange = (value) => {
    console.log('月份选择变化:', value);
    tempSelectedMonth.value = value.selectedValues[0];
    monthDefaultIndex.value = value.selectedIndexes[0];
};

// 确认筛选
const confirmFilter = () => {
    console.log('确认筛选时的状态:', {
        currentTab: tempCurrentTab.value,
        selectedYear: tempSelectedYear.value,
        selectedMonth: tempSelectedMonth.value
    });
    
    // 应用临时值到实际筛选值
    currentTab.value = tempCurrentTab.value;
    selectedYear.value = tempSelectedYear.value;
    selectedMonth.value = tempSelectedMonth.value;
    
    showFilter.value = false;
};

// 取消筛选
const cancelFilter = () => {
    // 重置临时值
    tempCurrentTab.value = currentTab.value;
    tempSelectedYear.value = selectedYear.value;
    tempSelectedMonth.value = selectedMonth.value;
    showFilter.value = false;
};

// 打开筛选弹窗时初始化临时值
const openFilter = () => {
    tempCurrentTab.value = currentTab.value;
    tempSelectedYear.value = selectedYear.value;
    tempSelectedMonth.value = selectedMonth.value;
    
    // 设置默认年份索引
    if (tempSelectedYear.value) {
        const yearIndex = yearColumns.value.findIndex(
            year => year.value === tempSelectedYear.value
        );
        yearDefaultIndex.value = yearIndex >= 0 ? yearIndex : 0;
    }
    
    // 设置默认月份索引
    if (tempSelectedMonth.value) {
        const monthIndex = monthColumns.value.findIndex(
            month => month.value === tempSelectedMonth.value
        );
        monthDefaultIndex.value = monthIndex >= 0 ? monthIndex : 0;
    }
    
    showFilter.value = true;
};

// 检查登录状态
const checkLoginStatus = () => {
    const storedUserInfo = localStorage.getItem('userInfo');
    if (!storedUserInfo) {
        messageBox.value.show('请先登录', null);
        return false;
    }
    try {
        userInfo.value = JSON.parse(storedUserInfo);
        return true;
    } catch (error) {
        console.error('解析用户信息失败:', error);
        messageBox.value.show('用户信息无效，请重新登录', null);
        return false;
    }
};

// 修改获取账单数据的函数
const fetchBills = async () => {
    if (!checkLoginStatus()) {
        bills.value = [];
        error.value = '请先登录';
        loading.value = false; // 确保未登录时关闭加载状态
        return;
    }

    loading.value = true;
    error.value = '';
    
    try {
        const response = await request.get('/api/category/categories', null, {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        console.log('获取到的类别数据:', response.data);
        
        if (Array.isArray(response.data)) {
            bills.value = response.data.flatMap(item => {
                if (!Array.isArray(item.data)) {
                    console.warn('item.data 不是数组:', item);
                    return [];
                }
                
                return item.data.map(dataItem => {
                    return {
                        id: item.id,
                        _id: dataItem._id,
                        order: item.order,
                        time: dataItem.time || new Date().toISOString(),
                        type: item.type || 'expense',
                        amount: dataItem.value || 0,
                        category: item.name || '未分类',
                        icon: item.icon || 'icon-jiangjin'
                    };
                });
            });
        } else {
            console.error('数据格式不正确:', response.data);
            bills.value = [];
            error.value = '数据格式不正确';
        }
    } catch (err) {
        console.error('获取账单数据失败:', err);
        if (err.response && err.response.status === 401) {
            error.value = '登录已过期，请重新登录';
            // 清除本地存储的userInfo
            localStorage.removeItem('userInfo');
        } else if (err.code === 'ECONNABORTED') {
            error.value = '请求超时，请检查网络连接';
        } else if (err.message.includes('Network Error')) {
            error.value = '网络连接失败，请检查网络设置';
        } else {
            error.value = '获取账单数据失败，请稍后重试';
        }
        bills.value = [];
    } finally {
        loading.value = false;
        // 如果有错误，显示错误提示
        if (error.value) {
            messageBox.value?.show(error.value);
        }
    }
};

// 安全的日期格式化函数
const formatDateString = (dateStr) => {
    try {
        if (!dateStr) {
            console.warn('日期为空，使用当前日期');
            return new Date().toISOString().split('T')[0];
        }
        
        const date = new Date(dateStr);
        if (isNaN(date.getTime())) {
            console.warn('无效的日期格式:', dateStr);
            return new Date().toISOString().split('T')[0];
        }
        return date.toISOString().split('T')[0];
    } catch (err) {
        console.error('日期格式化错误:', err);
        return new Date().toISOString().split('T')[0];
    }
};

// 按日期分组账单数据
const groupedBills = computed(() => {
    try {
        const groups = {};
        
        if (!Array.isArray(bills.value)) {
            console.error('bills 不是数组:', bills.value);
            return {};
        }
        
        // 根据筛选条件过滤数据
        let filteredBills = bills.value;
        
        if (currentTab.value === '按年' && selectedYear.value) {
            filteredBills = filteredBills.filter(bill => {
                const billDate = new Date(bill.time);
                const billYear = billDate.getFullYear();
                return billYear === selectedYear.value;
            });
        } else if (currentTab.value === '按月' && selectedYear.value && selectedMonth.value) {
            filteredBills = filteredBills.filter(bill => {
                const billDate = new Date(bill.time);
                const billYear = billDate.getFullYear();
                const billMonth = billDate.getMonth() + 1;
                return billYear === selectedYear.value && billMonth === selectedMonth.value;
            });
        }
        
        // 对过滤后的数据进行分组
        filteredBills.forEach(bill => {
            if (!bill) {
                console.warn('账单数据为空');
                return;
            }
            
            const date = formatDateString(bill.time);
            
            if (!groups[date]) {
                groups[date] = {
                    bills: [],
                    expense: 0,
                    income: 0
                };
            }
            
            const amount = Number(bill.amount) || 0;
            const type = bill.type || 'expense';
            
            groups[date].bills.push({
                id: bill.id,
                _id: bill._id,
                order: bill.order,
                time: bill.time,
                type: type,
                amount: amount,
                category: bill.category || '未分类',
                icon: bill.icon || 'icon-jiangjin'
            });
            
            if (type === 'expense') {
                groups[date].expense += amount;
            } else {
                groups[date].income += amount;
            }
        });
        
        // 对每个日期组内的账单按时间排序（降序）
        Object.values(groups).forEach(group => {
            group.bills.sort((a, b) => new Date(b.time) - new Date(a.time));
        });
        
        // 按日期降序排序并转换为有序对象
        const sortedGroups = Object.fromEntries(
            Object.entries(groups)
                .sort(([dateA], [dateB]) => dateB.localeCompare(dateA))
        );
        
        return sortedGroups;
    } catch (err) {
        console.error('账单分组处理错误:', err);
        return {};
    }
});

// 计算总支出
const totalExpense = computed(() => {
    try {
        // 使用当前筛选后的数据计算总支出
        const filteredBills = bills.value.filter(bill => {
            if (currentTab.value === '按年' && selectedYear.value) {
                const billDate = new Date(bill.time);
                return billDate.getFullYear() === selectedYear.value;
            } else if (currentTab.value === '按月' && selectedYear.value && selectedMonth.value) {
                const billDate = new Date(bill.time);
                return billDate.getFullYear() === selectedYear.value &&
                       billDate.getMonth() + 1 === selectedMonth.value;
            }
            return true;
        });
        
        const total = filteredBills
            .filter(bill => bill.type === 'expense')
            .reduce((sum, bill) => sum + (Number(bill.amount) || 0), 0);
            
        console.log('筛选后的总支出:', total);
        return total;
    } catch (err) {
        console.error('计算总支出错误:', err);
        return 0;
    }
});

// 计算总收入
const totalIncome = computed(() => {
    try {
        // 使用当前筛选后的数据计算总收入
        const filteredBills = bills.value.filter(bill => {
            if (currentTab.value === '按年' && selectedYear.value) {
                const billDate = new Date(bill.time);
                return billDate.getFullYear() === selectedYear.value;
            } else if (currentTab.value === '按月' && selectedYear.value && selectedMonth.value) {
                const billDate = new Date(bill.time);
                return billDate.getFullYear() === selectedYear.value &&
                       billDate.getMonth() + 1 === selectedMonth.value;
            }
            return true;
        });
        
        const total = filteredBills
            .filter(bill => bill.type === 'income')
            .reduce((sum, bill) => sum + (Number(bill.amount) || 0), 0);
            
        console.log('筛选后的总收入:', total);
        return total;
    } catch (err) {
        console.error('计算总收入错误:', err);
        return 0;
    }
});

// 计算本月支出
const currentMonthExpense = computed(() => {
    try {
        const now = new Date();
        const currentYear = now.getFullYear();
        const currentMonth = now.getMonth() + 1;
        
        // 只计算本月的支出
        const filteredBills = bills.value.filter(bill => {
            const billDate = new Date(bill.time);
            const billYear = billDate.getFullYear();
            const billMonth = billDate.getMonth() + 1;
            return billYear === currentYear && billMonth === currentMonth && bill.type === 'expense';
        });
        
        const total = filteredBills.reduce((sum, bill) => sum + (Number(bill.amount) || 0), 0);
        return total;
    } catch (err) {
        console.error('计算本月支出错误:', err);
        return 0;
    }
});

// 计算预算余额
const budgetBalance = computed(() => {
    return yusuan.value - currentMonthExpense.value;
});

// 格式化日期显示
const formatDate = (dateStr) => {
    try {
        const date = new Date(dateStr);
        if (isNaN(date.getTime())) {
            return '无效日期';
        }
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    } catch (err) {
        console.error('日期格式化错误:', err);
        return '无效日期';
    }
};

// 跳转到详情页
const goToContent = (bill) => {
    console.log('准备传递的账单数据:', bill);
    router.push({
        name: 'content',
        query: { 
            id: bill.id,
            _id: bill._id,
            type: bill.type,
            amount: bill.amount,
            category: bill.category,
            order: bill.order,
            icon: bill.icon,
            time: bill.time
        }
    });
};

// 修改无数据提示的显示条件
const showNoData = computed(() => {
    return !loading.value && !error.value && Object.keys(groupedBills.value).length === 0;
});

// 切换显示/隐藏金额
const toggleAmount = () => {
    showAmount.value = !showAmount.value;
};

// 显示预算输入框
const showBudgetInput = () => {
    budgetInput.value = yusuan.value.toString();
    showBudgetDialog.value = true;
    nextTick(() => {
        if (budgetInputRef.value) {
            budgetInputRef.value.focus();
        }
    });
};

// 确认预算设置
const confirmBudget = () => {
    const value = parseFloat(budgetInput.value);
    if (!isNaN(value) && value >= 0) {
        yusuan.value = value;
        localStorage.setItem('yusuan', value.toString());
        messageBox.value.show('预算设置成功');
        showBudgetDialog.value = false;
    } else {
        messageBox.value.show('请输入有效的预算值');
    }
};

// 组件挂载时获取数据
onMounted(() => {
    // 先设置加载状态为false，确保页面可以显示
    loading.value = false;
    // 然后检查登录状态并获取数据
    if (checkLoginStatus()) {
        fetchBills();
    } else {
        bills.value = [];
        error.value = '请先登录';
    }
});
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    min-height: 100vh;
    .top_banner {
        width: 100%;
        height: 360px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-size: 32px;
        color: #fff;
        position: fixed;
        top: 0;
        z-index: 100;
        .top_one {
            width: 100%;
            height: 100px;
            display: flex;
            padding: 0 30px;
            align-items: center;
            justify-content: space-between;
        }
        .zhichu {
            min-width: 200px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
        .shouru {
            margin-top: 40px;
            width: 100%;
            height: 100px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            font-size: 28px;
            text-align: center;
        }
    }
    .top_two {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        padding: 0 50px;
        position: fixed;
        top: 360px;
        z-index: 100;
        background-color: #fff;
        div {
            p {
                color: #000;
                font-size: 22px;
            }
        }
    }
    .content {
        margin-top: 460px;
        width: 100%;
        background-color: #fff;
        padding-bottom: 120px;
        .item {
            width: 100%;
            .item_time {
                
                    width: 100%;
                    height: 50px;
                    background-color: #f5f5f5;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 24px;
                    padding: 0 20px;
                    color: gray;
            }
            .item_cont {
                    width: 100%;
                    padding: 0 40px;
                    display: flex;
                    height: 90px;
                    justify-content: space-between;
                    align-items: center;
                    font-size: 28px;
                    div {
                        display: flex;
                        align-items: center;
                        span {
                            display: block;
                            margin-left: 20px;
                        }
                    }

            }    
        }
    }
}
.cont_num {
    &.expense {
        color: #ff9bb7;
    }
    &.income {
        color: #80e57f;
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #ff9bb7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1000;
    
    .retry-btn {
        margin-top: 10px;
        padding: 8px 20px;
        background: #ff9bb7;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        
        &:hover {
            background: darken(#ff9bb7, 10%);
        }
    }
}

.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    
    img {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }
    
    p {
        color: #999;
        font-size: 28px;
    }
}

.filter-popup {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #eee;
        
        .cancel, .confirm {
            font-size: 28px;
            color: #666;
            padding: 10px;
        }
        
        .confirm {
            color: #ff9bb7;
        }
        
        .filter-tabs {
            display: flex;
            gap: 30px;
            
            .tab-item {
                font-size: 28px;
                color: #666;
                padding: 10px;
                position: relative;
                
                &.active {
                    color: #ff9bb7;
                    font-weight: bold;
                    
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 40px;
                        height: 4px;
                        background: #ff9bb7;
                        border-radius: 2px;
                    }
                }
            }
        }
    }
    
    .year-picker, .month-picker {
        flex: 1;
        overflow: hidden;
        
        .picker-container {
            display: flex;
            height: 100%;
            justify-content: space-evenly;
        }
    }
}

// 覆盖 vant 样式
:deep(.van-picker) {
    height: 100%;
    
    .van-picker-column {
        font-size: 42px;
    }
    
    .van-picker-column__item {
        color: #333;
        
        &--selected {
            color: #ff9bb7;
            font-weight: bold;
        }
    }
}

.budget-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .dialog-content {
        width: 80%;
        max-width: 600px;
        background-color: #fff;
        border-radius: 20px;
        padding: 40px;
        box-sizing: border-box;

        .dialog-title {
            font-size: 32px;
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }

        .budget-input {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 28px;
            margin-bottom: 30px;
            box-sizing: border-box;

            &:focus {
                outline: none;
                border-color: #fb8fae;
            }
        }

        .dialog-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;

            button {
                width: 200px;
                height: 80px;
                border: none;
                border-radius: 40px;
                font-size: 32px;
                cursor: pointer;
                transition: all 0.3s ease;

                &:active {
                    transform: scale(0.95);
                }
            }

            .confirm-btn {
                background-color: #fb8fae;
                color: #fff;

                &:active {
                    background-color: darken(#fb8fae, 10%);
                }
            }

            .cancel-btn {
                background-color: #f5f5f5;
                color: #666;

                &:active {
                    background-color: darken(#f5f5f5, 10%);
                }
            }
        }
    }
}

.ys {
    cursor: pointer;
    &:hover {
        opacity: 0.8;
    }
}
</style>

